// 学生信息页面, 可以类比图书管理系统

// 需求1: 展示学生列表信息
// 根据图书管理系统逻辑,展示学生信息最好封装成一个函数,
// 将来增删完成后都可以再次调用刷新页面中最新数据

function initStuList() {
    axios({
        url: '/student/list',

    }).then(({
        data: res
    }) => {
        if (res.code == 0) {
            document.querySelector('tbody').innerHTML = res.data.map(item =>
                `<tr>
                    <th scope="row">${item.id}</th>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>${item.group}</td>
                    <td>${item.phone}</td>
                    <td>${item.salary}</td>
                    <td>${item.truesalary}</td>
                    <td>${item.province+item.city+item.county}</td>
                    <td>
                      <button data-id=${item.id} type="button" data-bs-toggle="modal"
                      data-bs-target="#updateModal"  class="update btn btn-primary btn-sm">修改</button>
                      <button data-id=${item.id}  type="button" class="delete btn btn-danger btn-sm">删除</button>
                    </td>
                </tr> `).join('')
        }
    })
}
// 页面一打开,自动渲染 学生列表
initStuList()

// 需求2: 删除功能,因为是动态新增的元素, 绑定事件需要用到事件委托
document.querySelector('tbody').addEventListener('click', function (e) {

    // if(e.target.className.indexOf('delete')!=-1)  ES5判断类名方法

    // if 逻辑非 + return 可以避免大量的if嵌套问题
    if (!e.target.classList.contains('delete')) return

    if (!confirm('是否删除学生信息?')) return

    let id = e.target.getAttribute('data-id')
    axios({
        url: '/student/delete',
        method: 'delete',
        params: {
            id
        }
    }).then(({
        data: res
    }) => {
        console.log(res)
        if (res.code == 0) {
            toastr.success(res.message)
            initStuList()
        }

    })

    if (e.target.classList.contains('updete')) {
        console.log(e.target)
    }
})




// 需求3: 省市区 先渲染 添加学生信息中的省市区
//获取 添加和修改 表单
let addForm = document.querySelector('.add-form')
let updateForm = document.querySelector('.update-form')
//调用 渲染省份
initPlace(addForm)
initPlace(updateForm)

//封装 一个可以 获取 不同表单 对应的省份
function initPlace(form) {

    let select1 = form.querySelector('[name="province"]')
    axios({
        url: '/geo/province',
        method: 'get'

    }).then(({
        data: res
    }) => {
        //这个接口没有res.code业务码
        // console.log(res)
        let arr = res.map(item => `<option value="${item}">${item}</option>`)
        //在数组最前面添加一个默认标签
        arr.unshift(`<option selected value="">--省--</option>`)
        select1.innerHTML = arr.join('')
    })
    // 点击'改变'省份之后 才能渲染 市
    let select2 = form.querySelector('[name=city]')
    select1.onchange = function () {
        // *******************************************************************
        //只要用户改变了省, 无条件直接清空 '区/县' 必须要写在 if前面,因为有return
        select3.innerHTML = '<option selected value="">--区/县--</option>'
        //如果选择省的时候 选择了--省--默认选项,那么就要清空掉"市" ,并且不用作axios请求
        if (select1.value == '') {
            select2.innerHTML = '<option selected value="">--市--</option>'
            return
        }
        // *******************************************************************
        axios({
            url: '/geo/city',
            params: {
                pname: this.value
            }
        }).then(({
            data: res
        }) => {
            // console.log(res)
            let arr = res.map(item => `<option value="${item}">${item}</option>`)
            //在数组最前面添加一个默认标签
            arr.unshift(`<option selected value="">--市--</option>`)
            select2.innerHTML = arr.join('')
        })
    }
    // 点击'改变'市之后 才能渲染 县
    let select3 = form.querySelector('[name=county]')
    select2.onchange = function () {
        // 如果选择市的时候 选择了--市--默认选项,那么就要清空掉"区/县" ,并且不用作axios请求
        if (this.value == '') {
            select3.innerHTML = '<option selected value="">--区/县--</option>'
            return
        }
        axios({
            url: '/geo/county',
            params: {
                pname: select1.value,
                cname: this.value
            }
        }).then(({
            data: res
        }) => {

            console.log(res)
            let arr = res.map(item => `<option value="${item}">${item}</option>`)
            //在数组最前面添加一个默认标签
            arr.unshift(`<option selected value="">--区/县--</option>`)
            select3.innerHTML = arr.join('')
        })
    }
}

// 需求4: 添加学生信息 (提交表单)
addForm.onsubmit = function (e) {
    e.preventDefault()
    axios({
        url: '/student/add',
        method: 'post',
        data: $(this).serialize()
    }).then(({
        data: res
    }) => {
        //成功回调
        if (res.code == 0) {
            toastr.success(res.message)
            document.querySelector('#addModal .btn-close').click()
            initStuList()
        }
    })
}


// 需求5: 点击修改按钮(事件委托), 发送请求 将这名学生信息渲染到表单  (使用id,数据回填)
document.querySelector('tbody').addEventListener('click', function (e) {
    // 首先判断 是不是点击的修改按钮 如果不是则直接return  (两种写法)
    // if(e.target.className.indexOf('update')==-1) return
    if (!e.target.classList.contains('update')) return
    //先拿到动态新增元素 修改按钮的 id
    let id = e.target.getAttribute('data-id')
    axios({
        url: '/student/one',
        params: {
            id
        }
    }).then(({
        data: res
    }) => {
        if (res.code == 0) {
            // console.log(res)
            let {
                name,
                age,
                sex,
                group,
                phone,
                id,
                salary,
                truesalary,
                province,
                city,
                county
            } = res.data

            //只要是"修改"功能,就会有一个type="hidden" 隐藏域 来存放id
            document.querySelector('#updateModal [name=id]').value = id
            document.querySelector('#updateModal [name=name]').value = name
            document.querySelector('#updateModal [name=age]').value = age
            //组号 (第一种写法)  这个有兼容性问题
            document.querySelector('#updateModal [name=group]').value = group

            /*  ES6写法*(不推荐,不利于拓展) 
               opt1s.forEach(item=>item.selected=item.value==res.data.group)
            */

            //组号 (第二种写法)  万能写法 (遍历每一个option)
            let opt1s = updateForm.querySelectorAll('[name=group] option')
            for (let i = 0; i < opt1s.length; i++) {
                if (opt1s[i].value == group) {
                    opt1s[i].selected = true
                } else {
                    opt1s[i].selected = false
                }
            }
            //性别 万能写法 (遍历每一个单选按钮)
            let sexList = updateForm.querySelectorAll('[name=sex]')
            for (let i = 0; i < sexList.length; i++) {
                if (sexList[i].value == sex) {
                    sexList[i].checked = true
                } else {
                    sexList[i].checked = false
                }
            }
            document.querySelector('#updateModal [name=phone]').value = phone
            document.querySelector('#updateModal [name=salary]').value = salary
            document.querySelector('#updateModal [name=truesalary]').value = truesalary
            //省市区 实际工作是需要 发送ajax后渲染, 此处偷懒
            // document.querySelector('#updateModal [name=province]').value = province
            // document.querySelector('#updateModal [name=city]').children[0].innerHTML = city
            // document.querySelector('#updateModal [name=county]').children[0].innerHTML = county


            document.querySelector('#updateModal [name=province]').value = province
            let str1 = `<option selected value="${city}">${city}</option>`
            document.querySelector('#updateModal [name=city]').innerHTML = str1
            let str2 = `<option selected value="${county}">${county}</option>`
            document.querySelector('#updateModal [name=county]').innerHTML = str2
        }
    })
})

// 需求6: 修改学生信息
updateForm.onsubmit = function (e) {
    e.preventDefault()
    axios({
        url: '/student/update',
        method: 'put',
        data: $(this).serialize()
    }).then(({
        data: res
    }) => {
        if (res.code == 0) {
            //成功回调
            console.log(res)
            console.log(this)
            toastr.success(res.message)
            document.querySelector('#updateModal .btn-close').click()
            initStuList()
        }
    })
}